<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/24
  Time: 22:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我要卖车</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/sellCar.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">
</head>

<style>
    .deal-more:hover{
        text-decoration: none;
        background:#179500;
        color: #fff;
    }
    .deal-more{
        display: block;
        width: 168px;
        height: 40px;
        margin: 15px auto 50px;
        text-align: center;
        line-height: 40px;
        background: #22ac38;
        font-size: 16px;
        color: #fff;
    }
</style>
<body>
<!--nav开始-->
<div id="nav_my">

</div>
<!--nav结束-->
<!--nav beigin-->
<div class="container-fluid">
    <div class="row" style=" height:340px ;margin-top:-19px;background: url('${pageContext.request.contextPath}/images/buy_nav_bk.png') top no-repeat">
        <div class="seller">
            <h2>免费检测评估</h2>

            <input type="text" class="phone" value="" name="buycar" id="buycar" placeholder="请输入你的手机号">
            <br>
            <!--              <button>高价卖车</button>-->
            <button class="btn btn-primary btn-lg button" data-toggle="modal" onclick="show_modal();" id="sell">高价卖车</button>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">精翼卖车</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="brName" class="col-md-4 control-label">所属品牌</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="brNames" placeholder="请输入品牌">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="stNames" class="col-md-4 control-label">所属车系</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="stNames" placeholder="请输入所属车系">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carRegistration" class="col-md-4 control-label">上牌时间</label>
                                    <div class="col-md-6">
                                        <input type="date" class="form-control" id="carRegistration" placeholder="请输入所属车系">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carMileage" class="col-md-4 control-label">行驶里程</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="carMileage" placeholder="请输入所属车系">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carDesc" class="col-md-4">文本框</label>
                                    <div class="col-md-6">
                                        <textarea class="form-control" rows="3" id="carDesc"></textarea>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="register()">提交更改</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <br>
            <br>
            <span>免费咨询电话:888-8888-888</span>
        </div>
    </div>
</div>
<!-- nav end-->

<!--intro begin-->
<div class="container-fluid intro">
    <div class="row">
        <!--        缩略图 begin-->
        <div class="row">
            <div class="col-md-4">
                <a href="#" class="thumbnail">
                    <img src="${pageContext.request.contextPath}/images/buy_one.png"
                         alt="通用的占位符缩略图">
                </a>
                <h3>免费检测评估</h3>
                <p>专业评估师给您精准价格</p>
            </div>
            <div class=" col-md-4">
                <a href="#" class="thumbnail">
                    <img src="${pageContext.request.contextPath}/images/buy_two.png"
                         alt="通用的占位符缩略图">
                </a>
                <h3>快速买车价格高</h3>
                <p>最快当日即可成交</p>
            </div>
            <div class=" col-md-4">
                <a href="#" class="thumbnail">
                    <img src="${pageContext.request.contextPath}/images/buy_three.png"
                         alt="通用的占位符缩略图">
                </a>
                <h3>全程一对一服务</h3>
                <p>买车全程免费服务</p>
            </div>
        </div>
        <!--        suoluotu end-->
    </div>
</div>
<!-- intro end-->
<br>
<!--服务 begin-->
<div class="container">
    <div class="row bargain">
        <h2 style="color: skyblue">最新成交</h2>
        <!--        缩略图-->
        <div class="row">
            <c:forEach var="x" items="${xrbRecentList}" begin="0" end="12">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="${pageContext.request.contextPath}/images/car1.png"
                             alt="" style="width: 80%;">
                        <div class="caption car_info ">
                            <p style="font-size: 15px">${x.brName}${x.stName} ${x.cPaifang}L ${x.cDrive}
                            </p>
                            <span class="mile">${x.cRegistration}年 | ${x.cMileage}万公里</span>
                            <p style="margin-top: 5px">成交价 <span style="color: #f76367;font-size: 18px">${x.rePrice}万</span>&nbsp;&nbsp;<strong>2天卖出</strong></p>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
        <!--        缩略图-->
    </div>
<%--    <a class="deal-more " data-toggle="modal" href="javascript:void(0)" >查看全部成交车源</a>--%>
    <a class="deal-more " data-toggle="modal" href="#myModal" >查看全部成交车源</a>

<%--    模态框--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="">近期成交记录查询</h4>
                </div>
                <div class="modal-body">
<%--                    form表单--%>

<%--                    <form class="form-horizontal" role="form" id="registerForm">--%>
                        <form class="form-horizontal" role="form" method="get" action="/prj/newDeal/show.action">
                        <div class="form-group row">
                            <label for="brName" class="col-md-2 control-label">车型</label>
                            <div class="col-md-4">
                                <input type="text" name="brName" class="form-control" id="brName" placeholder="品牌">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="stName" class="form-control" id="stName" placeholder="品牌">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="year" class="col-sm-2 control-label">上牌时间</label>
                            <div class="col-md-4">
                                <input type="text" name="year" class="form-control" id="year" placeholder="年份">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="month" class="form-control" id="month" placeholder="月份">
                            </div>
                        </div>
                        <div class="form-group row" >
                            <div class="col-md-2" style="margin-left: 210px;margin-top: 15px">
                                <button type="submit" class="btn btn-primary">近期成交记录查询</button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
<%--                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--%>
<%--                    <button type="button" class="btn btn-primary" onclick="register()">近期成交记录查询</button>--%>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<!--服务 end-->

<!--question begin-->
<div class="container-fluid">
    <div class="row question">
        <h2>精翼问答</h2>
        <div class="left">
            <h3>Q1：卖车流程是怎样的？</h3>
            <p>1、在本页填写卖车信息或拨打400-023-1529联系我们。<br/>
                2、由检测师进行车辆信息收集，并经过瓜子评估，给出瓜子价参考，由车主确定发布报价。<br/>
                3、达成交易合同，支付车款并过户。
            </p>
            <br>

            <h3>Q2:通过精翼网站出售车辆需要什么费用？</h3>
            <p>精翼网站上门验车不收取费用，免费评估，并为您免费提供车辆检测报告，整个服务过程全部免费。</p>
            <br>
            <h3>Q3:大概多长时间能够成交？</h3>
            <p>根据我们的经验，大部分车辆平均7日可以成交。但车辆的出售时间受市场情况、车况等多因素影响。</p>
        </div>
        <div class="right">
            <h3>Q4：卖车需要准备什么？</h3>
            <p>
                1、身份证；<br>
                2、环保标；<br>
                3、购置税本；<br>
                4、行驶证；<br>
                5、检字标；<br>
                6、购置税发票；<br>
                7、车辆登记证；<br>
                8、交强险标；<br>
                9、购车发票/最近一次过户发票；<br>
                10、交强险单。
            </p>
        </div>
    </div>
</div>
<!--footer-->
<div id="footer">

</div>
<!--footer-->
<!--question end-->
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>

    function register(){
        //一个控件一个控件进行获取了
        let brName = $("#brNames").val();
        let stName = $("#stNames").val();
        let carRegistration = $("#carRegistration").val();
        let carMileage = $("#carMileage").val();
        let carDesc = $("#carDesc").val();
        let call = $("#buycar").val();
        let datas = {"brName":brName,"stName":stName,"carRegistration":carRegistration,"carMileage":carMileage,"carDesc":carDesc,"call":call};
        //发送key-value
        $.post('/prj/carSales/sales.action',datas,function(data){
            success:function aa(data) {
                if (data.code="200"){
                    alert("预约卖车成功")
                }
            }
        });
    }

    //key-value
    // function register(){
    //     let register_value = $("#registerForm").serialize();//表单序列化
    //     //发送key-value
    //     $.get('/prj/newDeal/show.action',register_value,function(data){
    //         success:function x(data) {
    //             if (data.code == 200){
    //                 data.xrbRecentList
    //             }
    //         }
    //     });
    // }

    function show_modal() {
        let phone = $("#buycar").val();

        if(!(/^1[3456789]\d{9}$/.test(phone))){
            alert("手机号码有误，请重填");
            return;
        }else {
            $('#myModals').modal('show');
        }

    }

    // $(function () {
    //
    //     $("#sell").mouseout(function () {
    //         let phone = $("#phone").val();
    //
    //         if(!(/^1[3456789]\d{9}$/.test(phone))){
    //             alert("手机号码有误，请重填");
    //             return;
    //         }
    //     });
    //
    // });

    $(function(){
        $("#nav_my").load("${pageContext.request.contextPath}/jsp/common/nav.jsp");
    })

    $(function(){
        $("#footer").load("${pageContext.request.contextPath}/jsp/common/footer.jsp");
    })
</script>
</body>
</html>